<%@ page import="com.xlro.domain.Book" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.xlro.service.BookService" %><%--
  Created by IntelliJ IDEA.
  User: xlro
  Date: 2021/4/22
  Time: 16:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><% session.getAttribute("username");     %></title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="jQuery/css/htmleaf-demo.css">
    <link rel="stylesheet" href="jQuery/css/style.css"/>
    <style>

        #top-image {
            background: linear-gradient(
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2)
            ), url('jQuery/images/1.jpg') no-repeat fixed;
            position:fixed ;
            top:0;
            width:100%;
            z-index:0;
            height:100%;
        }

        html, body {
            font-size: 14px;
            width: 100%;
            height: 100%;
            color: black;
        }


        .login-layout {
            position: absolute;
            width: 90%;
            left: 50%;
            top: 50%;
            border-radius: .75rem;
            transform: translate(-50%, -50%);
            background: rgba(204,142,103, 0.6);
            padding: 100px 80px 80px 50px;
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            height: 66%;
        }


        .layui-form{
            width: 99%!important;
        }
    </style>
</head>
<body>

<%@include file="alert.jsp"%>

<div id="top-image">
    <div class="login">
        <div class="login-layout">
            <form class="layui-form" method="post" action="/searchBook" style="position: relative;top:-40px;left: 30px;color: black;">
                <br>
                <hr>

                <table class="layui-table" lay-data="{height:400,  page:true, id:'test'}" lay-filter="test">

                    <thead>
                    <tr>
                        <th lay-data="{field:'id', width:110,sort: false}">图书ID</th>
                        <th lay-data="{field:'name', width:160,sort: true}">书名</th>
                        <th lay-data="{field:'author', width:160,sort: true}">作者</th>
                        <th lay-data="{field:'position', width:110,sort: true}">位置</th>
                        <th lay-data="{field:'status', width:80,sort: true}">状态</th>
                        <th lay-data="{field:'desc',sort: true}">描述</th>
                        <th lay-data="{field:'control',width:260}">操作</th>
                    </tr>
                    </thead>

                    <tbody>
<%
    ArrayList<Book> books = new BookService().getAllBooks();

//    request.setAttribute("books", books);

    for (int i = 0; i < books.size(); i++) {
        Book book = books.get(i);
        out.print("<tr>");
        for (int j = 0; j < 6; j++) {
            out.print("" +
                    " <td> "+ book.getId() +" </td>\n " +
                    " <td> "+ book.getName() +" </td>\n " +
                    " <td> "+ book.getAuthor() +" </td>\n " +
                    " <td> "+ book.getPosition() +" </td>\n " +
                    " <td> "+ book.getStatus() +" </td>\n " +
                    " <td> "+ book.getDesc() +" </td>\n"+
                    "<td> <div class=\"layui-btn-group\">\n" +
                    "  <button name='btn1' status='false' id='"+ book.getId() +"' title=《"+book.getName()+"》 type=\"button\" class=\"layui-btn\">查看</button>\n" +
                    "  <button name='btn2' id='"+book.getId()+"'type=\"button\" class=\"layui-btn\">借阅</button>\n" +
                    "  <button name='btn3' id='"+book.getId()+"'type=\"button\" class=\"layui-btn\">收藏</button>\n" +
                    "</div></td> ");

        }
        out.print("</tr>");
    }
 %>
                    </tbody>
                </table>


            </form>
        </div>
    </div>
</div>

        <script src="layui/layui.js"></script>
        <script src="jQuery/js/jquery-1.11.0.min.js"></script>
        <script src="jQuery/js/ios-parallax.js"></script>
        <script>

            //加载模块
            layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
                                  //得到各种内置组件
                var layer = layui.layer; //弹层

                layer.config({
                    skin: 'demo-class'
                })
            });


            //JavaScript代码区域
            layui.use('element', function(){

            });
        </script>


<%--<%  request.setCharacterEncoding("utf-8");--%>
<%--    String message = request.getParameter("message");--%>
<%--    String title = request.getParameter("title");--%>
<%--    int time = Integer.parseInt(request.getParameter("time")!=null?request.getParameter("time"):"10000");--%>
<%--    int random = (int) (Math.random()*6+1);--%>
<%--    if(message != null && !message.equals("") && title!=null && !title.equals("")){--%>
<%--%>--%>
<script>
    layui.use('table', function(){
        var table = layui.table;

        var element = layui.element;
        var $ = layui.$;
        var layer = layui.layer;

        $("[name=btn1]").click(function () {

            var id = $(this).attr("id");
            var title = $(this).attr("title");

            //iframe窗
            layer.open({
                type: 2,
                title: title,
                closeBtn: 1, //不显示关闭按钮
                maxmin: true, //开启最大化最小化按钮
                // shade: [0],
                shadeClose: true,
                shade: false,
                area: ['33%', '66%'],
                offset: 'tb', //弹出
                time: 0,
                anim: 2,
                content: ['./bookInfo.jsp?id='+id, 'no'] //iframe的url，no代表不显示滚动条
                // end: function(){ //此处用于演示
                //     layer.open({
                //         type: 2,
                //         title: '很多时候，我们想最大化看，比如像这个页面。',
                //         shadeClose: true,
                //         shade: false,
                //         maxmin: true, //开启最大化最小化按钮
                //         area: ['893px', '600px'],
                //         content: './bookInfo.jsp'
                //     });
                // }
            });

        })

        $("[name=btn2]").click(function () {
            var bookId = $(this).attr("id");
            var id = $(this).attr("id");
            var title = $(this).attr("title");

            //iframe窗
            layer.open({
                type: 2,
                title: false,
                closeBtn: 0, //不显示关闭按钮
                maxmin: false, //开启最大化最小化按钮
                shade: [0],
                shadeClose: true,
                shade: false,
                area: ['30%', '10%'],
                offset: 'rb', //弹出
                // time: 0,
                time: 1000,
                anim: 2,
                content: ['./borrowBook.jsp?bookId='+id, 'no']
            });
        })

        $("[name=btn3]").click(function () {
            var bookId = $(this).attr("id");
            var id = $(this).attr("id");
            var title = $(this).attr("title");


            //iframe窗

            layer.open({
                type: 2,
                title: false,
                closeBtn: 0, //不显示关闭按钮
                maxmin: false, //开启最大化最小化按钮
                shade: [0],
                shadeClose: true,
                shade: false,
                area: ['30%', '10%'],
                offset: 'rb', //弹出
                // time: 0,
                time: 1000,
                anim: 2,
                content: ['./collBook.jsp?bookId='+id, 'no']
            });


        })

    });
</script>


        <script type="text/javascript">
            $(document).ready(function() {
                $('#top-image').iosParallax({
                    movementFactor: 500,
                    dampenFactor: 100
                });
            });

        </script>
</body>
</html>